<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/jquery-3.3.1.js"></script>
    <style>
    *{margin: 0;padding: 0}
    .banner{
        width: 992px;
        height: 420px;
        border: 1px solid #333;
        position: relative;
        margin-left: auto;margin-right: auto;
    }
    .banner-content img{
        position: absolute;
    }
    .banner-content img:not(:first-child){
        display: none;
    }
    .btns{
        position: absolute;
        z-index: 100;
        right: 10px;
        bottom: 10px;
    }
    .btns button{
        width: 30px;
        height: 30px;
        background: skyblue;
        border: 1px solid #eee;
        color: #fff;
        border-radius: 50%;
        outline: none;
    }
    .btns .current{
        color: #333;
        background:salmon;
    }
    </style>
</head>
<body>
    <div class="banner">
        <div class="banner-content">
            <img src="images/banner1.png" alt="" >
            <img src="images/banner2.png" alt="" >
            <img src="images/banner3.png" alt="" >
            <img src="images/banner4.png" alt="" >
            <img src="images/banner5.png" alt="" >
        </div>
        <div class="btns">
            <button class="current">1</button>
            <button>2</button>
            <button>3</button>
            <button>4</button>
            <button>5</button>
        </div>
    </div>
    <script>
        /*  
         1.当正在点击的按钮增加current样式，让它兄弟元素移动current样式
         2.点击按钮，让对应下标值的图片显示，技术要点 index（）-->获取元素的下标
         */
         $(function(){
             $(".btns button").click(function(){
                 $(this).addClass("current").siblings().removeClass("current")
                 
                 var imgs = $(".banner-content img");
                 var index = $(this).index();
                 console.log(index);
                 imgs.eq(index).show(1600).siblings().hide(1600)
             })
         })
    </script>
</body>
</html>